<section class="content-header">
    <h1>
        故障字数据维护
    </h1>
    <!-- <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
        </ol> -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-2 col-md-push-10">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-remove"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label>区域</label>
                        <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
                            [(selectedItem)]="subAareSelected" [value]="subAreaItems[0]" [searchEnabled]="true" (onValueChanged)="onSubAreaSelectedChange()">
                        </dx-select-box>
                    </div>
                    <div class="form-group">
                        <label>设备</label>
                        <dx-select-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="equipmentSelected"
                            displayExpr="equipment" placeholder="请选择工位" [searchEnabled]="true" [items]="equipemntItems">
                        </dx-select-box>
                    </div>

                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#excleImportModal" title="数据导入">
                        <i class="fa fa-file-excel-o"></i>数据导入
                    </button> 
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-10 col-md-pull-2">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">数据展示</h3>
                    <div class="box-tools pull-right">
                        <!-- <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#excleImportModal" title="数据导入">
                            <i class="fa fa-file-excel-o"></i>
                        </button> -->
                        <!-- <button type="button" (click)="saveChanges()" class="btn btn-info btn-sm" data-toggle="tooltip" title="保存">
                            <i class="fa fa-save"></i>
                        </button> -->
                        <button type="button" class="btn btn-info btn-sm" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">

                    <dx-data-grid [dataSource]="items" on [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxi-column [allowEditing]="false" dataField="area" caption="区域" [width]="150">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="subarea" caption="生成线" [width]="150">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="resource" caption="设备编号" [width]="150">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="pmcCode" caption="PMC编号" [width]="150">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="deviceAlarmNo" caption="设备报警号" [width]="150">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="faultWordDescription" caption="中文描述">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="faultWordDescriptionEn" caption="英文描述">
                        </dxi-column>
                        
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>
 
    <div class="modal fade" id="excleImportModal" tabindex="-1" role="dialog" aria-labelledby="myLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myLabel">故障字数据导入 - {{subAareSelected.subArea + ' / ' + equipmentSelected.equipment}}</h4>
                </div>
                <div class="modal-body">
                    <div class="blue clearfix">
                        <input style="width: 100%;" type="file" ng2FileSelect [uploader]="uploader" />
                        <a  style="cursor: pointer;" class="pull-right" (click)="downloadTemplate()">下载模板</a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)="importExcel()" data-dismiss="modal">导入</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</section>